<!-- 这里还是一个标准的BUI页面 -->
<!-- 侧滑栏的父层, -->
<style type="text/css">
    .menuSpan {
        width: 20%;
        height: 90px;
    }
    .bui-slide .bui-slide-head {
        bottom: 0;
    }

    .slide-nav {
        margin-bottom: .2rem;
        background-color: #ffffff;
    }

    .slide-nav .bui-btn {
        border: 0;
    }

    .slide-nav .icons-round {
        width: 0.76rem;
        height: 0.76rem;
        line-height: 0.76rem;
        text-align: center;
        border-radius: .2rem;
        margin: 0.2rem auto;
    }

    .slide-nav .icons-round i {
        font-size: 0.54rem;
        color: #fff;
        margin: 0;
    }

    .slide-nav .span1 {
        margin-bottom: 0.1rem;
    }

    .slide-nav .bui-slide-head {
        text-align: center;
        background: #fff;
        width: 100%;
        bottom: .1rem;
    }

    .index-nav .span1 {
        font-size: 0.2rem;
    }

    .bui-slide .bui-slide-head ul li {
        background-color: #d9d9d9;
    }

    .bui-slide .bui-slide-head ul li.active {
        background-color: #0072c5;
    }

    .slide-nav .bui-fluid-space [class*=span] {
        padding-left: 0;
        padding-right: 0;
    }

    .newcourse-panel .bui-panel-head {
        border-bottom: 0;
    }

    .slide-focus .bui-slide-main li {
        padding: 0 0.2rem 0.2rem;
    }

    .slide-focus .bui-slide-head {
        height: 0.2rem;

        top: -0.7rem;
        bottom: auto;
        text-align: right;
    }

    .index-menu .span6 {
        padding-top: .25rem;
        padding-bottom: .25rem;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    .index-menu .ring {
        border: 2px solid #4ad1dd;
        width: .72rem;
        height: .72rem;
        line-height: .54rem;
        margin-left: .2rem;
        margin-right: .2rem;
    }

    .footer-nav .bui-btn {
        background-color: transparent;
    }

    .footer-nav .big-btn .icon {
        color: #ffffff;
        border-radius: 50%;
        background-color: #0aa9e3;
        height: 0.9rem;
        width: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.64rem;
    }


    #container{
        width: 100%;
        position: relative;
        height: 40px;
        overflow: hidden;
        background-color: white;
        font-weight: bold;
    }
    #list-wrapper{
        position: relative;
        top: 0;
    }
    .notice-list {
        list-style: none;
        background: white;
        text-align: center;
        padding: 0 10px;
    }
    .notice-list li{
        height: 35px;
        line-height: 35px;
        color: black;
        width: 6rem;
        white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    }

    .listImg{
        width: 3rem;
        height: 1.7rem;
        object-fit: contain;
    }
    .listImg2{
        width: 2.2rem;
        height: 1.7rem;
        object-fit: contain;
    }
    .listTab{
        color: #f15c3a;
    }
    .imgBJPC{
        text-align: center;
        padding-left: 15px;
        max-height: 225px;
        overflow: hidden;
    }
    .imgBJ{
        text-align: center;
        padding-left: 15px;
        max-height: 70px;
        overflow: hidden;
    }
    .zdK{
        float: left;
        color: white;
        background-color: #32d296;
        margin-top: 1px;
        margin-right: 5px;
        border-radius: 2px;
        padding: 0 10px;
    }

    .header-search-wrap{
        background: rgba(255, 255, 255, .38);
        border-radius: .04rem;
        height: .64rem;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .header-search-wrap .header-city::after {
        content: '';
        width: 0;
        height: 0;
        border-top: .095rem solid #fff;
        border-right: .0735rem solid transparent;
        border-left: .0735rem solid transparent;
        top: .045rem;
        position: relative;
    }
    .header-search-wrap .header-city {
        margin-left: .1rem;
        margin-right: .17rem;
        font-size: .23rem;
        position: relative;
        word-break: break-all;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden;
    }
    .header-search-wrap .header-search-input {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .header-search-wrap .header-search-input::before {
        content: '';
        margin-right: .1rem;
        width: .27rem;
        height: .26rem;
        background: url(images/sl-index.png) -.86rem 0 no-repeat;
        background-size: auto;
        background-size: 1.13rem 1.05rem;
    }
    .header-join::before {
        content: '+';
        display: inline-block;
        margin-left: .1rem;
        margin-right: .05rem;
    }
    .header-join {
        width:auto;
        float: left;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .header-post::before {
        content: '';
        display: inline-block;
        margin-left: .15rem;
        margin-right: .05rem;
        width: .29rem;
        height: .3rem;
        background: url(images/sl-index.png) -.3rem 0.05rem no-repeat;
        background-size: auto;
        background-size: 0.8rem 0.8rem;
    }
    .header-post {
        width: auto;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .language {
        margin: 5px;
        font-size: 0.22rem;
    }
    .languageSelect{
        width: 18px;
        margin-right: 5px;
        background: white;
        color: black;
        border: 0;
        height: 18px;
        padding: 0;
    }
</style>
<div class="bui-page bui-box-vertical" id="mainLoading" style="height: 100%;background-image: linear-gradient(-180deg, #f5f5f5 0, #fff 100%);">
    <header>
        <div class="bui-box ignore" style="background-color: rgb(255,85,46);min-height: 30px;line-height: 30px;color: white" id="languageHead">
            <div class="span1">
                <p id="position" style="display: none;margin-left: 10px;font-size: 15px;font-weight: bold"></p>
            </div>
            <div class="span3" style="text-align: right" id="languageContent">
            </div>
        </div>
        <div class="bui-bar" style="background-color: rgb(255,85,46)">
<!--            <div class="bui-bar-left" style="text-align: center; line-height: 65px;width: 10%;">-->
            <div class="bui-bar-left" style="width: 10%;padding-top: 3.5px">
                <!-- 左边有图标示例 -->
<!--                <img src="images/logo.jpg" style="width: 31px;height: 31px">-->
                <p style="width: 31px;height: 15.5px;color: white;font-size: 15px;margin: 0 auto;">
                    海外
                </p>
                <p style="width: 31px;height: 15.5px;color: white;font-size: 15px;margin: 0 auto;">
                    同城
                </p>
            </div>
            <div class="bui-bar-main">
<!--                <div class="bui-box" style="background: rgba(255, 255, 255, .38); border-radius: 5px;height: 30px; line-height: 30px">-->
<!--                    <div style="width: 20%">-->
<!--                        <div style="color: white; font-size: 0.21rem" id="menu">-->
<!--                            <label id="country" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100%"></label>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="span1">-->
<!--                        <div class="bui-btn bui-box" style="height: 29px; background: rgba(255, 255, 255, .38);border-radius: 5px;border: 0" id="searchK">-->
<!--                            <img src="images/search.png" style="width: 25px;height: 25px; " id="searchPic">-->
<!--                            <div class="span1">-->
<!--                                <div class="bui-input">-->
<!--                                    <input id="search" type="text" placeholder="当地华人服务">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

                <div class="header-search-wrap">
                    <a class="header-city" id="menu"><span id="countryStr" style="width: 40px;white-space: nowrap;overflow: hidden; text-overflow: ellipsis"></span>
                    </a>
                    <div class="header-search-input bui-box">
                        <div class="bui-input span1" style="-webkit-border-radius: 0;">
                            <input id="search" type="text" placeholder="当地华人服务" style="width: 100%;font-size: 0.23rem">
                        </div>
                    </div>
                </div>
            </div>
            <div class="bui-bar-right" style="width: auto">
                <a class="header-join" rel="nofollow" id="gz">关注</a>
                <a class="header-post" rel="nofollow" id="fb">发布</a>
<!--                <div style="height: 0.5rem;width: 48%;font-size: 0.21rem;margin-left: 2%; margin-right: 2%;color: white;line-height: 0.4rem;border: 2px white solid;text-align: center;border-radius: 5px;float: left;margin-top: 10px;" id="gz">-->
<!--                    <img src="images/add.png" style="width: 0.17rem; height: 0.17rem">-->
<!--                    关注-->
<!--                </div>-->
<!--                <div style="height: 0.5rem;width: 48%;font-size: 0.21rem;color: white;line-height: 0.4rem;border: 2px white solid;text-align: center;border-radius: 5px;float: left;margin-top: 10px;" id="fb">-->
<!--                    <img src="images/push.png" style="width: 0.17rem; height: 0.17rem">-->
<!--                    发布-->
<!--                </div>-->
            </div>
        </div>
    </header>
    <main>

            <div id="scrollList" class="bui-scroll" style="overflow-x: hidden">
                <!-- 中间内容 -->
                <!-- 头部图片轮播 -->
                <div id="slide" class="bui-slide bui-slide-skin01 slide-nav" style="margin: 0">
                    <div id="slidemain" class="bui-slide-main">
                        <ul id="menuModel">

                        </ul>
                    </div>
                    <div class="bui-slide-head">
                        <ul id="menuHead">

                        </ul>
                    </div>
                </div>
                <div id="advertiseK" style="padding: 0.12rem;background: white;display: none">
                    <img id="advertise" style="width: 100%; height: 1.5rem">
                </div>
                <div id="container" style="margin-top: 5px; margin-bottom: 5px;height: 1.1rem">
                    <img src="images/noticeIcon.jpg" style="width: 30px; height: 30px; float: left;margin: 12px 0 5px 5px">
                    <div id="list-wrapper" style="float: left;left: 35px">
                        <ul class="notice-list" id="notice-list">
                        </ul>
                        <ul class="notice-list" id="notice-list-2">
                        </ul>
                    </div>
                </div>

                <p id="listTitle" style="font-size: 0.34rem;color: black; padding: .26rem 0 .21rem .31rem;line-height: .34rem; background: white; margin: 0"></p>

<!--                <div class="bui-scroll-head"></div>-->
                <div class="bui-scroll-main">
                    <ul class="bui-list bui-list-thumbnail">

                    </ul>
                </div>
                <div class="bui-scroll-foot"></div>
            </div>




        <!-- 中间自定义弹出框结构	 -->
        <div id="gzDialog" class="bui-dialog" style="display: none;width: 300px;height: 400px">
            <div class="bui-dialog-head">微信二维码</div>
            <div class="bui-dialog-main">
                <img style="width: 150px;object-fit: contain;" id="qrcode">
                <p style="width: 100%; font-size: 18px;font-weight: bold">长按识别或扫描二维码</p>
            </div>
            <div class="bui-dialog-close"><i class="icon-close"></i></div>
        </div>
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</div>
